
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
react-resize-detector
Advanced tools
The react-resize-detector is a React component designed to handle resize events for React elements. It provides a simple and efficient way to trigger a function or render logic when the size of an element changes. This is particularly useful in responsive designs and when elements need to adjust based on their container's dimensions.
Basic resize detection
This feature allows you to detect the size of a component and react to changes. The `useResizeDetector` hook provides `width`, `height`, and `ref` which you attach to the component you want to monitor. The component re-renders whenever the size changes, displaying the new dimensions.
import React from 'react';
import useResizeDetector from 'react-resize-detector';
const ResponsiveComponent = () => {
const { width, height, ref } = useResizeDetector();
return (
<div ref={ref}>
Size: {width} x {height}
</div>
);
};
export default ResponsiveComponent;
OnResize callback
This feature uses the `withResizeDetector` higher-order component to monitor size changes. It provides `width`, `height`, and an `onResize` callback that is triggered on every resize event. This is useful for performing actions or calculations based on the new size.
import React from 'react';
import { withResizeDetector } from 'react-resize-detector';
class MyComponent extends React.Component {
render() {
const { width, height, onResize } = this.props;
return (
<div onResize={onResize}>
Current size: {width} x {height}
</div>
);
}
}
export default withResizeDetector(MyComponent, {
handleWidth: true,
handleHeight: true,
onResize: (width, height) => console.log(`Resized to ${width} x ${height}`)
});
react-sizeme is another package that provides similar functionality to react-resize-detector. It allows components to respond to changes in size. However, react-sizeme uses a higher-order component approach primarily, which might be less convenient than hooks provided by react-resize-detector in functional components.
This package is a polyfill for the ResizeObserver API, which is used to report changes to the dimensions of an Element's content or border box. It's more of a low-level API compared to react-resize-detector, which provides React-specific abstractions and hooks for easier integration in React applications.
Nowadays browsers have started to support element resize handling natively using ResizeObservers. We use this feature (with a polyfill) to help you handle element resizes in React.
No window.resize
listeners! No timeouts! Just a pure implementation with a lightning-fast polyfill!
npm i react-resize-detector
// OR
yarn add react-resize-detector
Starting from v5.0.0 there are 2 recommended ways to work with resize-detector
library:
import { withResizeDetector } from 'react-resize-detector';
const CustomComponent = ({ width, height }) => <div>{`${width}x${height}`}</div>;
export default withResizeDetector(CustomComponent);
import ReactResizeDetector from 'react-resize-detector';
// ...
<ReactResizeDetector handleWidth handleHeight>
{({ width, height }) => <div>{`${width}x${height}`}</div>}
</ReactResizeDetector>;
import React, { Component } from 'react';
import { withResizeDetector } from 'react-resize-detector';
const containerStyles = {
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
};
class AdaptiveComponent extends Component {
state = {
color: 'red'
};
componentDidUpdate(prevProps) {
const { width } = this.props;
if (width !== prevProps.width) {
this.setState({
color: width > 500 ? 'coral' : 'aqua'
});
}
}
render() {
const { width, height } = this.props;
const { color } = this.state;
return <div style={{ backgroundColor: color, ...containerStyles }}>{`${width}x${height}`}</div>;
}
}
const AdaptiveWithDetector = withResizeDetector(AdaptiveComponent);
const App = () => {
return (
<div>
<p>The rectangle changes color based on its width</p>
<AdaptiveWithDetector />
</div>
);
};
export default App;
import React, { useState, useEffect } from 'react';
import { withResizeDetector } from 'react-resize-detector';
const containerStyles = {
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
};
const AdaptiveComponent = ({ width, height }) => {
const [color, setColor] = useState('red');
useEffect(() => {
setColor(width > 500 ? 'coral' : 'aqua');
}, [width]);
return <div style={{ backgroundColor: color, ...containerStyles }}>{`${width}x${height}`}</div>;
};
const AdaptiveWithDetector = withResizeDetector(AdaptiveComponent);
const App = () => {
return (
<div>
<p>The rectangle changes color based on its width</p>
<AdaptiveWithDetector />
</div>
);
};
export default App;
We still support other ways to work with this library, but in the future consider using the ones described above. Please let me know if the examples above don't fit your needs.
The library is trying to be smart and to not add any extra DOM elements to not break your layouts. That's why we use findDOMNode
method to find and attach listeners to the existing DOM elements. Unfortunately, this method has been deprecated and throws a warning in StrictMode.
For those who wants to avoid this warning we are introducing an additional property targetRef
. You have to set this prop as a ref
of your target DOM element and the library will use this reference instead of serching the DOM element with help of findDOMNode
import { withResizeDetector } from 'react-resize-detector';
const CustomComponent = ({ width, height, targetRef }) => <div ref={targetRef}>{`${width}x${height}`}</div>;
export default withResizeDetector(CustomComponent);
import ReactResizeDetector from 'react-resize-detector';
// ...
<ReactResizeDetector handleWidth handleHeight>
{({ width, height, targetRef }) => <div ref={targetRef}>{`${width}x${height}`}</div>}
</ReactResizeDetector>;
Prop | Type | Description | Default |
---|---|---|---|
onResize | Func | Function that will be invoked with width and height arguments | undefined |
handleWidth | Bool | Trigger onResize on width change | true |
handleHeight | Bool | Trigger onResize on height change | true |
skipOnMount | Bool | Do not trigger onResize when a component mounts | false |
refreshMode | String | Possible values: throttle and debounce See lodash docs for more information. undefined - callback will be fired for every frame | undefined |
refreshRate | Number | Use this in conjunction with refreshMode . Important! It's a numeric prop so set it accordingly, e.g. refreshRate={500} | 1000 |
refreshOptions | Object | Use this in conjunction with refreshMode . An object in shape of { leading: bool, trailing: bool } . Please refer to lodash's docs for more info | undefined |
targetRef | Ref | Use this prop to pass a reference to the element you want to attach resize handlers to. It must be an instance of React.useRef or React.createRef functions | undefined |
MIT
Show us some love and STAR ⭐ the project if you find it useful
FAQs
React resize detector
The npm package react-resize-detector receives a total of 1,164,870 weekly downloads. As such, react-resize-detector popularity was classified as popular.
We found that react-resize-detector demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.